<template>
    <div class="f-menu" :style="{ width:$store.state.asideWidth }">
        <el-menu :default-active="defaultOpeneds" unique-opened :collapse="isCollapse" default-active="2" class="border-0" @select="handleSelect" :collapse-transition="false">
            <MenuItems :menuList="asideMenus"/>
        </el-menu>
    </div>
</template>
<script setup>
    import { computed,ref } from 'vue';
    import { useRouter,useRoute } from 'vue-router';
    import { useStore } from 'vuex';
    import MenuItems from "./MenuItem.vue"
    const router = useRouter()
    const store = useStore()
    const route = useRoute()

    // 是否折叠
    const isCollapse = computed(()=> !(store.state.asideWidth == '250px'))

    const asideMenus = computed(()=>store.state.menus)

    const handleSelect = (e)=>{
        router.push(e)
    }
    // 在父组件中计算需要展开的菜单
    const defaultOpeneds = computed(() => {
            const paths = route.path.split('/').filter(Boolean)
            return paths.map((_, index) =>
                '/' + paths.slice(0, index + 1).join('/')
            )
        })
</script>
<style>
    .f-menu {
        transition: all 0.2s;
        top: 64px;
        bottom: 0;
        left: 0;
        overflow-y: auto;
        overflow-x: hidden;
        @apply shadow-md fixed bg-light-50;
    }
    .f-menu::-webkit-scrollbar{
        width: 0px;
    }
</style>
